<template>
  <!-- 项目实施 - 弹窗标题栏 -->
  <div class="modal-btns">
    <div class="left-btns">
      <img v-if="modalType != '' && modalType != 'table' && modalType != 'preTaskModal' && modalType != 'workModal' && modalType != 'workModal2'" :src="modalImgs.saveClose" alt="保存并关闭" @click="closeModal"/>
      <img v-if="modalType == 'add'" :src="modalImgs.saveAdd" alt="保存并新建" @click="closeModal"/>
      <img v-if="modalType == 'edit' || modalType == 'edit1' || modalType == 'edit2'" :src="modalImgs.saveEdit" alt="保存并修改下一条" @click="closeModal"/>
      <img v-if="modalType == 'add'" :src="modalImgs.saveCopy" alt="保存并复制" @click="closeModal"/>
      <img v-if="modalType == 'edit' || modalType == 'edit1' || modalType == 'edit2'" :src="modalImgs.save" alt="保存" @click="closeModal"/>
      <img v-if="modalType != '' && modalType != 'table' && modalType != 'preTaskModal' && modalType != 'workModal' && modalType != 'workModal2'" :src="modalImgs.cancel" alt="取消" @click="closeModal('cancel')"/>
    </div>
    <div class="right-btns">
      <img v-if="modalType != '' && modalType != 'table' && modalType != 'preTaskModal' && modalType != 'workModal' && modalType != 'workModal2'" :src="modalImgs.check" alt="智能校验"/>
      <img v-if="modalType == '' || modalType == 'table' || modalType == 'preTaskModal' || modalType == 'workModal' || modalType == 'workModal2'" :src="modalImgs.arrows" alt="切换箭头"/>
    </div>
  </div>
</template>

<script>
export default {
  name: "modalBtns",
  props: {
    modalType: {
      type: String,
      default: () => ''
    }
  },
  watch: {
    modalType(n) {}
  },
  data() {
    return {
      modalImgs: {
        saveClose: require('../images/btn-save-close.png'), // 保存并关闭
        saveAdd: require('../images/btn-save-add.png'), // 保存并新建
        saveEdit: require('../images/btn-save-edit.png'), // 保存并修改下一条
        saveCopy: require('../images/btn-save-copy.png'), // 保存并复制
        save: require('../images/btn-save.png'), // 保存
        cancel: require('../images/btn-cancel.png'), // 取消
        check: require('../images/btn-smart-check.png'), // 智能校验
        arrows: require('../images/btn-arrows.png'), // 切换箭头
      }
    } 
  },
  methods: {
    /**
     * @author Wrl
     * 关闭弹窗
     */
    closeModal(e) {
      if(e != 'cancel') {
        this.$message.success('保存成功！')
      }
      setTimeout(() => {
        // this.bgi = '';
        this.$emit("close");
      }, 500)
    }
  }
}
</script>
<style lang="scss" scoped>
  .modal-btns {
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    img {
      cursor: pointer;
      height: 30px;
      margin-bottom: 10px;
    }
    .left-btns {
      display: inline-flex;
      justify-content: flex-start;
      img {
        margin-right: 8px;
      }
    }
    .right-btns {
      display: inline-flex;
      justify-content: flex-end;
      img {
        margin-left: 8px;
      }
    }
  }
</style>
